<template>
  <el-menu
    active-text-color="rgba(191, 203, 217,1)"
    background-color="rgba(32, 112, 165, 1)"
    text-color="#fff"
    class="el-menu-vertical-demo"
    :default-active="current_route"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
  >
    <MenuItem v-for="route in menuLists" :key="route.key" :item="route" />
  </el-menu>
</template>

<script>
import MenuItem from "./MenuItem.vue";
import { mapGetters } from "vuex";
export default {
  name: "LayoutMenu",
  components: { MenuItem },
  computed: {
    ...mapGetters(["permission_menus", "current_route"]),
  },
  props: {
    isCollapse: {
      type: Boolean,
      required: true,
    },
  },
  mounted() {
    // 获取验证过权限的侧边栏
    this.permission_menus.then((res) => {
      this.menuLists = res;
      console.log(this.menuLists);
    });
  },
  data() {
    return {
      menuLists: [],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
.el-menu {
  border-right: 0;
}
</style>
